<template>
	<view class="care">
		<view class="header">
			<navigator delta="1" open-type="navigateBack" class="image" style="margin-right: 160rpx;">
				<image src="../../static/image/fanhui@3x.png" mode="widthFix" style="width: 70rpx;" />
			</navigator>
			<view class="title">
				<text>A6-一汽大众奥迪</text>
				<image src="../../static/image/aodijiantou@3x.png" mode="widthFix" style="width: 30rpx;"></image>
			</view>
		</view>
		<view class="banner" style="margin-top: 8rpx;">
			<image src="https://i.loli.net/2021/04/13/RZQ5eGHIDorkB2b.png" mode="widthFix" style="width: 702rpx;"></image>
		</view>
		<view class="service">
			<view class="item" v-for="(item,index) in serviceList" :key="item.id" @click="checkService(index)">
				<image :src="'../../static/image/'+item.src" mode="widthFix" style="width: 64rpx;"></image>
				<text :class="item.isShow?'text active':'text'">{{item.content}}</text>
			</view>
		</view>
		<view class="carWashingMethod">
			<view class="top">
				<view class="topItem" v-for="item in carWashingMethod" :key="item.id" @click="chooseWashingMethod(item.id)">
					<text>{{item.content}}</text>
					<view class="line" v-show="currentWashing == item.id"></view>
				</view>
			</view>
			<view class="bottom">
				<view class="bottomItem">
					<text>武侯区</text>
					<image src="../../static/image/wuhouqu@3x.png" mode="widthFix" style="width: 20rpx;"></image>
				</view>
				<view class="bottomItem" style="width: 150rpx;">
					<text>默认排序</text>
					<image src="../../static/image/wuhouqu@3x.png" mode="widthFix" style="width: 20rpx;"></image>
				</view>
				<view class="bottomItem" style="background-color: #eeeeee; width: 168rpx;">
					<image src="../../static/image/yuyue@3x.png" mode="widthFix" style="width: 25rpx;"></image>
					<text style="color: #999999;">预约洗车</text>
				</view>
			</view>
		</view>
		<view class="footer">
			<view v-for="item in listShop" :key="item.shopId"  @click="toStore(item.shopId)">
				<HomeStore :shopName="item.shopName" :shopImage="item.shopImage" />
			</view>
			<view class="saleInfo">
				<view class="left">
					<text class="leftOne">标准洗车</text>
					<text class="leftTwo">已售23</text>
				</view>
				<view class="right">
					<text class="rightOne">￥35</text>
					<text class="rightTwo">30.00</text>
					<navigator url="/pages/home/store">
						<button type="default" size="mini">购买</button>
					</navigator>
				</view>
			</view>
		</view>

	</view>

</template>

<script>
	import HomeStore from "../../components/homeStore/HomeStore.vue";
	
	//vuex
	import { createNamespacedHelpers } from "vuex";
	let { mapState, mapActions, mapMutations } = createNamespacedHelpers(
	  "home"
	);
	
	export default {
		components: {
			HomeStore
		},
		mounted(){
			this.getShop()
		},
		data() {
			return {
				//服务列表
				serviceList:[
					{id:1,content:"洗车",src:"xiche@2x.png",isShow:false},
					{id:2,content:"打蜡",src:"dala@3x.png",isShow:false},
					{id:3,content:"内饰",src:"neishi@3x.png",isShow:false},
					{id:4,content:"美容服务",src:"meirong@3x.png",isShow:false},
					{id:5,content:"轮胎服务",src:"luntai@3x.png",isShow:false}
				],
				//洗车选项
				carWashingMethod: [{
						id: 1,
						content: "标准洗车"
					},
					{
						id: 2,
						content: "全车精洗"
					},
					{
						id: 3,
						content: "洗车机外观清洗"
					},
					{
						id: 4,
						content: "洗车机标准清洗"
					}
				],
				currentWashing:1
			};
		},
		computed:{
			...mapState(["listShop"])
		},
		methods: {
			//所有门店
			...mapActions(["getShop"]),
			//洗车服务
			checkService(index) {
				this.serviceList.forEach(item => item.isShow = false);
				this.serviceList[index].isShow = true
			},
			
			//洗车方法动画
			chooseWashingMethod(id) {
				this.currentWashing = id
			},
			
			//4s店铺详情
			toStore(shopId){
				uni.navigateTo({
				    url: '/pages/home/store?shopId='+shopId
				});
				uni.setStorageSync('shopId', shopId);
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.care {
		padding: 24rpx;
		background-color: #f9f9f9;

		.header {
			box-sizing: border-box;
			height: 176rpx;
			display: flex;
			align-items: center;
			font-weight: bold;
			padding-top: 100rpx;
		}

		.service {
			display: flex;
			justify-content: space-between;
			padding: 20rpx 34rpx;

			.item {
				display: flex;
				flex-direction: column;
				align-items: center;

				.text {
					font-size: 24rpx;
					border-radius: 20rpx;
					text-align: center;

					&.active {
						color: #FFFFFF;
						background-color: #ff5300;
					}
				}

			}
		}

		.carWashingMethod {
			background-color: #FFFFFF;
			border-radius: 20rpx 20rpx 0 0;
			padding: 24rpx;

			.top {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.topItem {
					text {
						font-size: 28rpx;
						color: #999999;
						line-height: 70rpx;

						&.active {
							color: #ff5300;
							font-size: 28rpx;
						}
					}

					.line {
						height: 8rpx;
						width: 70%;
						background-color: #ff5702;
						border-radius: 20rpx;
						margin: auto;
					}
				}
			}

			.bottom {
				display: flex;
				margin-top: 10rpx;

				.bottomItem {
					color: #ff5300;
					font-size: 24rpx;
					background-color: #fff5db;
					border-radius: 24rpx;
					line-height: 40rpx;
					width: 126rpx;
					margin-right: 20rpx;
				}
			}
		}

		.footer {
			.saleInfo {
				display: flex;
				padding: 0 24rpx;
				justify-content: space-between;

				.left {
					display: flex;
					flex-direction: column;

					.leftOne {
						font-size: 28rpx;
						color: #333333;
					}

					.leftTwo {
						font-size: 18rpx;
						color: #999999;
					}
				}

				.right {
					.rightOne {
						font-size: 18rpx;
						color: #999999;
					}

					.rightTwo {
						font-size: 28rpx;
						color: #ff5300;
					}

					button {
						border-radius: 40rpx;
						color: #FFFFFF;
						border: none;
						outline: none;
						background-color: #ff5300;
					}
				}
			}
		}
	}
</style>
